import {
  AbstractButton,
  WithMargins,
  Paragraph,
  C06HeroSlideBanner,
  C26InlineButtonWrapper,
  C27SubPageListing,
  C28SchoolListing,
  Icon,
  AbstractImage,
} from "@/components";
import { getAbout, useApplicationInfo } from "@/store/applicationDataContext";
import { View } from "@tarojs/components";
import { useEffect, useState } from "react";
import { colors } from "@/data/shared/colors";
import { navigateTo } from "@/utils/navigation";
import { SchoolDetailSubset } from "../c28-SchoolListing";
import { setClipboardData, useDidShow } from "@tarojs/taro";
import { DiscoverTabsEnum } from "@/pages/discover/discoverData";
import style from "./index.module.scss";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";
import { SchoolShape } from "@/data/about/aboutTypes";

export default function C25AboutMain() {
  const { applicationState, dispatch } = useApplicationInfo();
  const { about } = applicationState;
  const [schoolDetail, setSchoolDetail] = useState<null | SchoolDetailSubset>(
    null
  );
  const [addressCopied, setAddressCopied] = useState(false);

  useEffect(() => {
    sendAction(ActionNames.AboutUsImpression);
  }, []);

  useEffect(() => {
    if (!applicationState.about) {
      getAbout(dispatch);
    }
    initSharing();
  }, [dispatch]);

  useDidShow(() => {
    initSharing();
  });

  const initSharing = () => {
    if (dispatch) {
      dispatch({
        type: "DISCOVER_TAB",
        data: {
          tab: DiscoverTabsEnum.About,
        },
      });
    }
  };

  useEffect(() => {
    if (schoolDetail === null) {
      // Reset address copied if schooldetail gets reset
      setAddressCopied(false);
    }
  }, [schoolDetail]);

  const onSchoolLinkClick = (school: SchoolShape) => {
    const { type, name } = school;
    const actionName =
      type === "永久中心"
        ? ActionNames.AboutUsCenterClick
        : ActionNames.AboutUsOverseasClick;
    const actionProperties =
      type === "永久中心"
        ? {
            [ActionKeys.FixedCenterName]: name,
          }
        : {
            [ActionKeys.OverseasCenterName]: name,
          };

    sendAction(actionName, actionProperties);
    setSchoolDetail(school);
  };

  return (
    <>
      <View
        className={`${style["about-wrapper"]} ${
          schoolDetail ? style.blurred : null
        }`}
      >
        {about && (
          <>
            {!!about.carouselMap.length && (
              <C06HeroSlideBanner
                images={about.carouselMap}
                themeColor={colors.colorViking}
                videoSrc={null}
              />
            )}
            <WithMargins>
              <View className="heading-l">{about.title}</View>
              <Paragraph color={colors.colorAboutIntro}>
                {about.introduction}
              </Paragraph>
              <C26InlineButtonWrapper>
                <AbstractButton
                  onClick={() => {
                    sendAction(ActionNames.AboutUsContentPartClick, {
                      [ActionKeys.AboutUsPartName]: "关于L'ECOLE珠宝艺术中心",
                    });
                    navigateTo(
                      `pages/about-subpage/index?id=${about.heroSubPageId}`
                    );
                  }}
                  color="viking"
                >
                  了解更多
                </AbstractButton>
              </C26InlineButtonWrapper>
              {about.subPages && (
                <C27SubPageListing
                  listData={about.subPages.filter(
                    (page) => page.id !== about.heroSubPageId
                  )}
                />
              )}
            </WithMargins>
            {about.centre && (
              <C28SchoolListing
                schools={about.centre}
                onShowDetailsClickCb={onSchoolLinkClick}
              />
            )}
          </>
        )}
      </View>
      {/* School detail - not as component as background blur part of functionality */}
      {schoolDetail && (
        <>
          <View
            className={style["school-details-background"]}
            onClick={() => {
              setSchoolDetail(null);
            }}
          />
          <View className={style["school-details-wrapper"]}>
            {/* TODO: replace iconpath with selected image */}
            <AbstractImage
              type={"none"}
              className={style["background-image"]}
              src={schoolDetail.image}
            />
            <Icon
              type="CloseBlack"
              className={style.close}
              onClick={() => {
                setSchoolDetail(null);
              }}
            />
            <View className={style.content}>
              <View className={style["first-row"]}>{schoolDetail.name}</View>
              <View className={style["second-row"]}>
                {schoolDetail.address}
              </View>
              {schoolDetail.telephone && (
                <View className={style["third-row"]}>
                  {schoolDetail.telephone}
                </View>
              )}
              <View className={style["fourth-row"]}>
                {schoolDetail.website}
              </View>

              <AbstractButton
                color="white-no-border"
                className={style.button}
                onClick={() => {
                  setClipboardData({
                    data: schoolDetail.website,
                    success() {
                      setAddressCopied(true);
                      // Close modal after timeout
                      setTimeout(() => {
                        setSchoolDetail(null);
                      }, 1200);
                    },
                  });
                }}
              >
                {addressCopied ? "地址已复制" : "复制网址前往官方网站"}
              </AbstractButton>
            </View>
          </View>
        </>
      )}
    </>
  );
}
